<template>
  <div class="message">
        <Breadcrumb :pathContent="content"/>
        <el-form>
            <el-form-item>
                <div class="message-content">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="业务消息" name="first"><MessageList /></el-tab-pane>
                    </el-tabs>
                    <div class="all-read">
                        <el-button type="text" @click="allRead">全部标记为已读</el-button>
                    </div>
                </div>
            </el-form-item>
      </el-form>
  </div>
</template>
<script>
import { setMessageState } from '../../public/js/message'
const Breadcrumb = () => import('@/components/common/Breadcrumb')
const MessageList = () => import('@/components/message/MessageList')

export default {
  name: 'Staff',
  token: '',
  data () {
    return {
      activeName: 'first',
      information: {},
      content: {
        firstTitle: '消息',
        secondTitle: '消息列表',
        type: 'close'
      },
      resdData: [],
      sendData: {
        pageSize: 10,
        pageNum: 1
      }
    }
  },
  mounted () {
    window.bus.$on('allRead', res => {
      this.dataReset(res.data, res.sendData)
    })
  },
  methods: {
    dataReset (res, data) {
      this.resdData = []
      res.forEach(item => {
        if (item.handler === null) this.resdData.push(item.id)
      })
      this.sendData.pageSize = data.pageSize
      this.sendData.pageNum = data.pageNum
    },
    allRead () {
      setMessageState(this.sendData, this.resdData).then(res => {
        if (res.data.errCode === 0) {
          this.$message.success('当前页面已全部标为已读')
          window.bus.$emit('backData', res.data)
          this.dataReset(res.data.messageEntities, res.data)
        }
      })
    }
  },
  components: {
    Breadcrumb,
    MessageList
  }
}
</script>
<style lang="scss">
    .message {
        #tab-first {
            margin-bottom: 30px;
        }
        .message-content {
            margin-top: 20px;
            background-color: white;
            padding: 20px 30px;
            position: relative;
            .all-read {
                position: absolute;
                top: 2%;
                right: 1.8%;
            }
        }
    }
</style>
